<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
<template>
  <div>
    <el-dialog v-model="formDelete.dialog" title="确认" width="30%" center>
      <template #default>
        <div class="action_tip">
          您将删除:{{ formDelete.name }}
        </div>
      </template>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="formDelete.dialog = false">取消</el-button>
        <el-button type="danger" @click="confirmDelete">确定</el-button>
      </span>
      </template>
    </el-dialog>

    <el-dialog v-model="formEdit.dialog" title="修改" width="40%" center>
      <el-form :model="formEdit" :inline="true" v-loading="loading">
        <el-form-item label="姓名">
          <el-input v-model="formEdit.name"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="formEdit.email"></el-input>
        </el-form-item>

        <el-form-item label="昵称">
          <el-input v-model="formEdit.nickname"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="formEdit.phone"></el-input>
        </el-form-item>
        <el-form-item label="部门">
          <el-cascader v-model="formEdit.sectionId" :props="defaultProps" :options="listEnterPrise"
                       @change="handleEditChange"/>
        </el-form-item>
        <el-form-item label="角色">
          <!--          <el-input v-model="formAdd.enterprise"></el-input>-->
          <el-radio-group v-model="formEdit.role">
            <el-radio :value="2" :label="2">用户</el-radio>
            <el-radio :value="1" :label="1">管理员</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="formEdit.dialog=false">取消</el-button>
        <el-button type="primary" @click="confirmEdit">确认</el-button>
      </span>
      </template>
    </el-dialog>

    <el-dialog v-model="formAdd.dialog" title="添加" width="40%" center>
      <el-form :rules="rules" :model="formAdd" :inline="true" class="demo-form-inline">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="formAdd.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="formAdd.password"></el-input>
        </el-form-item>

        <el-form-item label="姓名">
          <el-input v-model="formAdd.name"></el-input>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="formAdd.nickname"></el-input>
        </el-form-item>

        <el-form-item label="手机号">
          <el-input v-model="formAdd.phone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="formAdd.email"></el-input>
        </el-form-item>
        <el-form-item label="部门">
          <!--          <el-input v-model="formAdd.enterprise"></el-input>-->
          <el-cascader v-model="formAdd.sectionId" :props="defaultProps" :options="listEnterPrise"
                       @change="handleAddChange"/>
        </el-form-item>
        <el-form-item label="角色">
          <!--          <el-input v-model="formAdd.enterprise"></el-input>-->
          <el-radio-group v-model="formAdd.role">
            <el-radio :value="2" :label="2">用户</el-radio>
            <el-radio :value="1" :label="1">管理员</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="formAdd.dialog=false">取消</el-button>
        <el-button type="primary" @click="confirmAdd">确认</el-button>
      </span>
      </template>
    </el-dialog>

    <el-row :gutter="20" style="width: 100%;height: 100%">
      <el-col :span="4">
        <left-bar></left-bar>
      </el-col>
      <el-col :span="18">
        <div class="button_add">
          <el-button type="primary" @click="addLog">
            <el-icon>
              <Plus></Plus>
            </el-icon>
            添加
          </el-button>
          <!--      <el-button type="primary" @click="editLog(null)">添加</el-button>-->
          <el-input v-model="search.name"

                    placeholder="输入姓名查询">
          </el-input>

          <el-input v-model="search.nickname"

                    placeholder="输入昵称查询">
          </el-input>
          <el-input v-model="search.phone"
                    placeholder="输入手机号查询">
          </el-input>
          <el-button type="primary" @click="getTableData">
            <el-icon>
              <Search></Search>
            </el-icon>
            查询
          </el-button>
          <el-button type="primary" @click="getExcel">
            <el-icon>
              <Download></Download>
            </el-icon>
            下载
          </el-button>
          <el-button @click="refreshTable">
            <el-icon>
              <Refresh></Refresh>
            </el-icon>
            重置
          </el-button>
        </div>
        <el-table v-loading="loading" :header-cell-style="{background:'#eef1f6',color:'#606266'}" border
                  stripe :data="tableData">
          <el-table-column prop="userId" label="编号" width="auto"/>
          <el-table-column prop="name" label="姓名" width="auto"/>
          <el-table-column prop="email" label="邮箱" width="auto"/>
          <el-table-column prop="enterpriseName" label="部门" width="auto">
            <template #default="scopeEdit">
              {{ scopeEdit.row.enterpriseName }} /{{ scopeEdit.row.sectionName }}
            </template>
          </el-table-column>
          <el-table-column prop="role" label="角色" width="auto">
            <template #default="scopeEdit">
              <el-tag :type="scopeEdit.row.role === 1 ? 'danger' : 'success'">
                {{ scopeEdit.row.role == "1" ? "管理员" : "用户" }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="contact" label="企业联系方式" width="auto"/>
          <el-table-column prop="nickname" label="昵称" width="auto"/>
          <el-table-column prop="phone" label="手机号" width="auto"/>
          <el-table-column prop="createTime" label="创建时间" width="auto"/>

          <el-table-column fixed="right" label="操作">
            <template #default="scopeEdit">
              <el-button
                  type="danger"
                  size="small"
                  @click.prevent="deleteLog(scopeEdit.row.userId,scopeEdit.row.name)">
                <el-icon>
                  <Delete/>
                </el-icon>
                <span>删除</span>
              </el-button>
              <el-button
                  type="primary"
                  size="small"
                  @click.prevent="editLog(scopeEdit.row.id,scopeEdit.row.userId)">
                <el-icon>
                  <Edit/>
                </el-icon>
                <span>编辑</span>
              </el-button>
            </template>
          </el-table-column>
        </el-table>

      </el-col>

    </el-row>

  </div>
</template>

<script lang="ts" setup>

import {onMounted, reactive, ref, watch} from "vue";
import {Delete, Download, Edit, Plus, Refresh, Search} from '@element-plus/icons-vue'

import {

  deleteUserByUserIdApi,

  getEnUserInfoByIdApi,
  updateInfo,
  addUserApi,
  getUserByInfoApi,
  getEnterpriseApi,
  getUserInfoByIdApi,
  getExcel,
  getExcelApi
} from "@/api/admin";
import {ElMessage} from "element-plus";

import {closeLoading, showLoading, successTips, warningTips} from "@/utils/util";

import LeftBar from "@/components/user-controller-bar/leftBar.vue";


//数据初始化
onMounted(() => {
  getTableData()
})


//分页操作


const tableData = ref([])

const loading = ref(true)
const search = reactive({
  nickname: "",
  phone: "",
  name: "",
})
const rules = {
  name: [
    {required: true, message: '请输入姓名', trigger: 'blur'},
    // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
  ],
  username: [
    {required: true, message: '请输入用户名', trigger: 'blur'},
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'},
  ],
  nickname: [
    {required: true, message: '请输入昵称', trigger: 'blur'},
  ],
  region: [
    {required: true, message: '请选择活动区域', trigger: 'change'}
  ],
  date1: [
    {type: 'date', required: true, message: '请选择日期', trigger: 'change'}
  ],
  date2: [
    {type: 'date', required: true, message: '请选择时间', trigger: 'change'}
  ],
  type: [
    {type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change'}
  ],
  resource: [
    {required: true, message: '请选择活动资源', trigger: 'change'}
  ],
  desc: [
    {required: true, message: '请填写活动形式', trigger: 'blur'}
  ]
}

function refreshTable() {
  Object.assign(search, {
    nickname: "",
    phone: "",
    name: "",
  })
  getTableData()
}

const handleAddChange = (value: any) => {
  formAdd.sectionId = value[1]
}

const handleEditChange = (value: any) => {
  formEdit.sectionId = value[1]
}
const searchEnterPrise = ref('')
const listEnterPrise = ref([])
const defaultProps = {
  label: 'name',
  value: 'section_id',
  children: 'sections',
}

function getExcel() {
  getExcelApi(search)
}

function getTableData() {
  getUserByInfoApi(search).then((response: any) => {
    if (response.code === 200) {
      tableData.value = response.data
    } else {
      ElMessage.warning(response.msg)
    }
    loading.value = false
  }).catch(function (res: any) {
    loading.value = false
    ElMessage.error("页面加载失败")
  })

  getEnterpriseApi(searchEnterPrise).then((response: any) => {
    if (response.code === 200) {
      listEnterPrise.value = response.data
    } else {
      ElMessage.warning(response.msg)
    }
    loading.value = false
  }).catch(function (res: any) {
    loading.value = false
    ElMessage.error("页面加载失败")
  })
}


//添加修改数据初始化
const formAdd = reactive({
  id: '',
  userId: '',
  username: "",
  password: "",
  name: "",
  role: 2,
  nickname: "",
  sex: 0,
  phone: "",
  email: "",
  enterprise: "",
  sectionId: "",
  enterpriseContact: "",
  dialog: false
})

function addLog() {
  let formRaw = {
    enterprise: "",
    enterpriseContact: "",
    username: "",
    name: "",
    role: 2,
    nickname: "",
    sex: 0,
    phone: "",
    sectionId: "",
    email: "",
    dialog: true
  }
  Object.assign(formAdd, formRaw)
}

function confirmAdd() {
  if (formAdd.username.trim() == '') {
    warningTips("用户名不可为空")
    return
  }
  addUserApi(formAdd).then((response: any) => {
    if (response.code === 200) {
      successTips(response.message)
      Object.assign(formAdd, {
        enterprise: "",
        enterpriseContact: "",
        username: "",
        name: "",
        role: 2,
        nickname: "",
        sectionId: "",
        sex: 0,
        phone: "",
        email: "",
        dialog: false
      })
    } else {
      warningTips(response.message)
    }
    loading.value = false
    formEdit.dialog = false
    getTableData()
  })
}


const formEdit = reactive({
  id: '',
  userId: '',
  username: "",
  name: "",
  role: 2,
  nickname: "",
  sectionId: "",
  sex: 0,
  phone: "",
  email: "",
  enterprise: "",
  enterpriseContact: "",
  dialog: false
})

function editLog(id: any, userId: any) {
  let formRaw = {
    id: '',
    userId: userId,
    username: "",
    name: "",
    role: 2,
    nickname: "",
    sex: 0,
    phone: "",
    email: "",
    enterprise: "",
    enterpriseContact: "",
    dialog: true
  }
  if (id) {
    getUserInfoByIdApi(formRaw).then((response: any) => {
      Object.assign(formRaw, response.data[0])
      Object.assign(formEdit, formRaw)
    })
  } else {
    Object.assign(formEdit, formRaw)
  }
}

function confirmEdit() {
  updateInfo(formEdit).then((response: any) => {
    if (response.code === 200) {
      successTips(response.message)
    } else {
      warningTips(response.message)
    }
    loading.value = false
    formEdit.dialog = false
    getTableData()
  })
}

function Cancel() {
  formEdit.dialog = false;
}


const formDelete = reactive({
  id: null,
  name: '',
  dialog: false
})


function deleteLog(userId: any, name: any) {
  Object.assign(formDelete, {
    userId: userId,
    name: name,
    dialog: true
  })

}

function confirmDelete() {
  showLoading()
  deleteUserByUserIdApi(formDelete)
      .then(function (response: any) {
        getTableData()
        formDelete.dialog = false
        ElMessage.success(response.message)
        closeLoading()
      })
}


</script>
